<template>
    <div class="QilinSearch">
        <el-form
            ref="QilinSearchRef"
            inline
            :model="ownSearchConfig.submitData"
            :label-position="(ownSearchConfig.elFormConfig && ownSearchConfig.elFormConfig.labelPosition) || 'right' "
            :label-suffix="(ownSearchConfig.elFormConfig && ownSearchConfig.elFormConfig.labelSuffix) || ':' "
            :size="(ownSearchConfig.elFormConfig && ownSearchConfig.elFormConfig.size) || 'small' "
            :class="ownSearchConfig.elFormConfig ? ownSearchConfig.elFormConfig.className : ''"
        >
            <template
                v-for="(item,index) in ownSearchConfig.itemConfig"
            >
                <el-form-item
                    v-if="!item.isHide"
                    :key="item.dataName || 'form-search-key-'+index "
                    :label="item.labelName || (!item.hideLabel ? '默认名称'+index : '' ) "
                    :prop="item.dataName"
                    :class="item.className"
                >
                    <template v-if="item.type === 'input' || !item.type ">
                        <el-input
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            :type="item.inputType || 'text' "
                            :clearable="item.clearable === false ? false : true"
                            :disabled="item.disabled || false "
                            :placeholder="item.placeholder || '请输入'+item.labelName "
                            :prefix-icon="item.prefixIcon"
                            :suffix-icon="item.suffixIcon"
                            :style="`width:${item.width ? item.width : 150}px;`"
                            v-bind="item"
                        >
                            <template v-slot:prefix>
                                <slot :name="item.prefixSlotName"></slot>
                            </template>
                            <template v-slot:suffix>
                                <slot :name="item.suffixSlotName"></slot>
                            </template>
                        </el-input>
                    </template>
                    <template v-else-if="item.type === 'select' ">
                        <el-select
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            :placeholder="item.placeholder || '请选择'+item.labelName "
                            :clearable="item.clearable === false ? false : true "
                            :disabled="item.disabled || false "
                            :multiple="item.multiple || false "
                            :collapse-tags="item.collapseTags || false"
                            :filterable="item.filterable === false ? false : true "
                            :style="`width:${item.width ? item.width : 150}px;`"
                            v-bind="item"
                            @change="(val)=>{
                                synchronous('change',item,val)
                            }"
                        >
                            <el-option
                                v-for="optItem in ownSearchConfig.selectLists[item.dataListName]"
                                :key="[null,undefined].includes(optItem.value) ? optItem[item.customValueName] : optItem.value"
                                :disabled="optItem.disabled || false "
                                :label="[null,undefined].includes(optItem.label) ? optItem[item.customLabelName] : optItem.label"
                                :value="[null,undefined].includes(optItem.value) ? optItem[item.customValueName] : optItem.value"
                            ></el-option>
                        </el-select>
                    </template>
                    <template v-else-if="item.type === 'date' ">
                        <el-date-picker
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            v-bind="item"
                            :disabled="item.disabled || false "
                            :type="item.dateType || 'date' "
                            :placeholder="
                                !(item.dateType && item.dateType.includes('range')) ? (item.placeholder || '请选择'+item.labelName) : ''
                            "
                            :start-placeholder="
                                (item.dateType && item.dateType.includes('range')) ? item.startPlaceholder || '开始时间' : ''
                            "
                            :end-placeholder="
                                (item.dateType && item.dateType.includes('range')) ? item.endPlaceholder || '结束时间' : ''
                            "
                            :format="item.format || 'yyyy-MM-dd' "
                            :value-format="item.valueFormat || 'yyyy-MM-dd' "
                            :range-separator="item.rangeSeparator || '至' "
                            :default-time="
                                item.defaultTime ||
                                ((item.dateType && item.dateType.includes('range')) ? ['08:30:00','17:30:00'] : '08:30:00')
                            "
                            :style="`width:${item.width ? item.width : (item.dateType && item.dateType.includes('range')) ? 280 : 150}px;`"
                            @change="(val)=>{
                                synchronous('change',item,val);
                            }"
                        ></el-date-picker>
                    </template>
                    <template v-else-if="item.type === 'cascader' ">
                        <el-cascader
                            v-model="ownSearchConfig.submitData[item.dataName]"
                            :placeholder="item.placeholder || '请选择'+item.labelName "
                            :options="ownSearchConfig.selectLists[item.dataListName] || [] "
                            :props="item.cascaderProps"
                            :disabled="item.disabled || false "
                            :style="`width:${item.width ? item.width : 180}px;`"
                            v-bind="item"
                        >
                        </el-cascader>
                    </template>
                    <template v-else-if="item.type === 'slot' ">
                        <slot :name="item.slotName" :data="{item}"></slot>
                    </template>
                </el-form-item>
            </template>
            <template v-if="ownSearchConfig.moreItemConfig && ownSearchConfig.moreItemConfig.length > 0">
                <div class="QilinSearch-more">
                    <span
                        v-if="!showMore"
                        @click="showMore=true"
                    >
                        展开<el-icon class="el-icon-arrow-down"></el-icon>
                    </span>
                    <span
                        v-else
                        @click="showMore=false"
                    >
                        收起<el-icon class="el-icon-arrow-up"></el-icon>
                    </span>
                </div>
                <el-collapse-transition>
                    <div
                        class="QilinSearch-more-form"
                        v-show="showMore"
                    >
                        <template
                            v-for="(item,index) in ownSearchConfig.moreItemConfig"
                        >
                            <el-form-item
                                v-if="!item.isHide"
                                :key="item.dataName || 'form-more-search-key-'+index "
                                :label="item.labelName || (!item.hideLabel ? '默认名称'+index : '' ) "
                                :prop="item.dataName"
                                :class="item.className"
                            >
                                <template v-if="item.type === 'input' || !item.type ">
                                    <el-input
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        :type="item.inputType || 'text' "
                                        :clearable="item.clearable === false ? false : true "
                                        :disabled="item.disabled || false "
                                        :placeholder="item.placeholder || '请输入'+item.labelName "
                                        :prefix-icon="item.prefixIcon"
                                        :suffix-icon="item.suffixIcon"
                                        :style="`width:${item.width ? item.width : 150}px;`"
                                        v-bind="item"
                                    >
                                        <template v-slot:prefix>
                                            <slot :name="item.prefixSlotName"></slot>
                                        </template>
                                        <template v-slot:suffix>
                                            <slot :name="item.suffixSlotName"></slot>
                                        </template>
                                    </el-input>
                                </template>
                                <template v-else-if="item.type === 'select' ">
                                    <el-select
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        :placeholder="item.placeholder || '请选择'+item.labelName "
                                        :clearable="item.clearable === false ? false : true "
                                        :disabled="item.disabled || false "
                                        :multiple="item.multiple || false "
                                        :collapse-tags="item.collapseTags || false"
                                        :filterable="item.filterable === false ? false : true "
                                        :style="`width:${item.width ? item.width : 150}px;`"
                                        v-bind="item"
                                        @change="(val)=>{
                                            synchronous('change',item,val)
                                        }"
                                    >
                                        <el-option
                                            v-for="optItem in ownSearchConfig.selectLists[item.dataListName]"
                                            :key="[null,undefined].includes(optItem.value) ? optItem[item.customValueName] : optItem.value"
                                            :disabled="optItem.disabled || false "
                                            :label="[null,undefined].includes(optItem.label) ? optItem[item.customLabelName] : optItem.label"
                                            :value="[null,undefined].includes(optItem.value) ? optItem[item.customValueName] : optItem.value"
                                        ></el-option>
                                    </el-select>
                                </template>
                                <template v-else-if="item.type === 'date' ">
                                    <el-date-picker
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        v-bind="item"
                                        :disabled="item.disabled || false "
                                        :type="item.dateType || 'date' "
                                        :placeholder="
                                            !(item.dateType && item.dateType.includes('range')) ? (item.placeholder || '请选择'+item.labelName) : ''
                                        "
                                        :start-placeholder="
                                            (item.dateType && item.dateType.includes('range')) ? item.startPlaceholder || '开始时间' : ''
                                        "
                                        :end-placeholder="
                                            (item.dateType && item.dateType.includes('range')) ? item.endPlaceholder || '结束时间' : ''
                                        "
                                        :format="item.format || 'yyyy-MM-dd' "
                                        :value-format="item.valueFormat || 'yyyy-MM-dd' "
                                        :range-separator="item.rangeSeparator || '至' "
                                        :default-time="
                                            item.defaultTime ||
                                            ((item.dateType && item.dateType.includes('range')) ? ['08:30:00','17:30:00'] : '08:30:00')
                                        "
                                        :style="`width:${item.width ? item.width : (item.dateType && item.dateType.includes('range')) ? 280 : 150}px;`"
                                        @change="(val)=>{
                                            synchronous('change',item,val);
                                        }"
                                    ></el-date-picker>
                                </template>
                                <template v-else-if="item.type === 'cascader' ">
                                    <el-cascader
                                        v-model="ownSearchConfig.submitData[item.dataName]"
                                        :placeholder="item.placeholder || '请选择'+item.labelName "
                                        :options="ownSearchConfig.selectLists[item.dataListName] || [] "
                                        :props="item.cascaderProps"
                                        :style="`width:${item.width ? item.width : 180}px;`"
                                        v-bind="item"
                                    >
                                    </el-cascader>
                                </template>
                                <template v-else-if="item.type === 'slot' ">
                                    <slot :name="item.slotName" :data="{item}"></slot>
                                </template>
                            </el-form-item>
                        </template>
                    </div>
                </el-collapse-transition>
            </template>
            <el-form-item class="QilinSearch-btn">
                <template v-for="(item,index) in ownSearchConfig.buttonConfig">
                    <el-button
                        :key="item.btnName+index"
                        :type="item.btnType || 'primary' "
                        :size="item.btnSize || 'default' "
                        :class="item.className"
                        v-bind="item"
                        @click="item.btnClick && item.btnClick(item.formRefName && item.formRefName())"
                    >{{item.btnName || "查询"}}</el-button>
                </template>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name:"QilinSearch",
    props:{
        searchConfig:{
            type:Object,
            default(){
                return {
                    // el-form表单元素的相关配置
                    elFormConfig:{
                        labelPosition:"right", //el-form元素的label对齐方式--默认right
                        labelSuffix:"：", //el-form元素的label后缀--默认为：
                        size:"small", //el-form元素的表单大小--默认small
                        className:"", //el-form元素的自定义类名
                    },
                    // 搜索表单结构相关配置项
                    itemConfig:[
                        {
                            dataName:"name", //对应后台数据名
                            labelName:"", //label文字名称
                            isHide:false, //是否隐藏该表单项
                            hideLabel:false, //是否隐藏label字段
                            className:"", //el-form-item元素的自定义类名
                            type:"input", //表单输入类型--默认为input
                            inputType:"text", //表单input类型--默认为text--仅当type为input时生效
                            dataListName:"", //下拉数据名对应selectLists中属性--当type为select、checkbox时生效
                            slotName:"", //slot元素name名称，仅当type为slot时生效
                            prefixIcon:"", //输入框前置内置图标
                            prefixSlotName:"", //输入框前置内置图标插槽名称
                            suffixIcon:"", //输入框后置内置图标
                            suffixSlotName:"", //输入框后置内置图标插槽名称
                            clearable:true, //是否可以一键清空--默认true
                            disabled:false, //是否禁用--默认false
                            placeholder:"", //表单提示语
                            multiple:false, //是否多选--当type为select、checkbox时生效
                            collapseTags:false, //多选时是否将选中值按文字的形式展示--当type为select时生效
                            filterable:false, //是否可筛选--当type为select时生效
                            customLabelName:"label", //下拉选项中自定义label对应字段值，默认label--当type为select、checkbox时生效
                            customValueName:"value", //下拉选项中自定义value对应字段值，默认value--当type为select、checkbox时生效
                            startPlaceholder:"", //日期开始提示语
                            endPlaceholder:"", //日期结束提示语
                            dateType:"date", //时间选择器类型--默认为date--当type为date时生效
                            format:"yyyy-MM-dd", //时间格式化配置--默认yyyy-MM-dd--当type为date时生效
                            valueFormat:"yyyy-MM-dd", //时间格式化配置--默认yyyy-MM-dd--当type为date时生效
                            defaultTime:"08:30:00", // 当选择时间时默认选中的时分秒时刻，默认8点半
                            rangeSeparator:"至", //时间选择器的范围分隔符
                            cascaderProps:{}, //配置级联选择器的选项，当type为cascader时生效，里面的参数详见element官网文档
                            width:150, //元素宽度，不写默认为150px
                        }
                    ],
                    // 展开时搜索表单结构配置项，同itemConfig一致
                    moreItemConfig:[],
                    // 下拉列表数据配置
                    selectLists:{},
                    // 搜索栏右侧按钮数据配置
                    buttonConfig:[
                        {
                            btnName:"按钮", //按钮名称
                            btnType:"primary", //按钮类型
                            btnSize:"small", //按钮大小
                            className:"", //按钮自定义类名
                            formRefName:"event", //因为生命周期的原因，故该属性接收一个用以返回DOM元素的方法
                            btnClick:"event" //点击事件
                        }
                    ],
                    // 表单需要提交的数据配置
                    submitData:{}
                }
            }
        }
    },
    data(){
        return {
            showMore:false, //是否展开
        }
    },
    computed:{
        ownSearchConfig:{
            get(){
                return this.searchConfig;
            },
            set(val){
                this.$emit("update:searchConfig",val);
            }
        }
    },
    methods:{
        // 触发表单元素定义事件
        synchronous(eventType,item,e,ref){
            // console.log(eventType,item,e);
            item[eventType] && item[eventType](item,e);
        },
        // 重置表单事件监听
        resetSearchData(){
            this.$refs["QilinSearchRef"].resetFields();
            for(let key in this.ownSearchConfig.submitData){
                this.ownSearchConfig.submitData[key]="";
            };
        }
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.QilinSearch{
    width:100%;
    :deep(.el-form){
        position:relative;
        overflow:hidden;
        &.el-form--inline .el-form-item{
            margin-right:10px;
        }
        .el-range-separator{
            width:10%;
        }
        >.QilinSearch-more{
            display:inline-block;
            margin-top:8px;
            color:$primary-text-color;
            cursor: pointer;
            vertical-align:middle;
        }
        >.QilinSearch-btn{
            position:absolute;
            top:0;
            right:0;
        }
    }
}
</style>
